<template>
  <div class="mh-container with-tab">
    <div class="banner">
      <div class="locate-city">
        <img src="../../assets/images/ico/ico_locate.png" alt="当前城市">
        <span>{{city}}</span>
      </div>
      <img src="../../assets/images/demo/banner_meet.png" alt="">
    </div>
    <div class="recomend-pic" @click.stop="detail(info.user_id)">
      <div class="total-num"><span class="cur-num">{{curNum}}</span>/{{pageSize}}</div>
      <div class="like-num">
        <span class="like-num-inner">
          <img src="../../assets/images/ico/ico_heart.png" alt="喜欢">
          <span>{{info.love_num || 0}}</span>
        </span>
      </div>
      <div class="reco-pic-box" v-if='imgArr && imgArr[0].image'>
        <img :src="imgArr[0].image" alt="">
      </div>
      <div class="reco-info flex-bt">
        <div class="info-left">
          <p class="flex">
            <span class="u-name">{{info.nickname}}</span>
            <span class="identify" v-if='info.is_shiming==1'>实名</span>
            <span class="level" v-if='info.user_rank==1'>高级会员</span>
          </p>
          <p class="per-info">{{info.age}}岁/{{info.height}}厘米/{{info.education}}/{{info.income}}</p>
        </div>
        <div class="info-right">
          <span class="matching">{{info.pipei}}%</span>
          <p>匹配度</p>
        </div>
      </div>
    </div>

    <div class="operate-box flex">
      <div class="btn-close" @click='tabUser'><img src="../../assets/images/ico/ico_close.png" alt="不喜欢"></div>
      <div class="btn-reward" @click='reward'><img src="../../assets/images/ico/ico_mony.png" alt="打赏"></div>
      <div class="btn-like" @click='like'><img src="../../assets/images/ico/ico_heart_lg.png" alt="喜欢"></div>
    </div>
    <tab-menu :activeTab="activeFootTab"> </tab-menu>
  </div>
</template>

<script>
import TabMenu from '@/components/tab-menu/tab-menu'
import {MH_API} from "@/api/api";
export default {
  name: "meet",
  data () {
    return {
      activeFootTab: 0,
      info: {},
      imgArr: [
        {image: ''}
      ],
      pageSize: 10,
      curNum: 1,
      city: '上海'
    }
  },
  beforeCreate() {
    let quitTime = null;
    mui.plusReady(function () {
      // console.log(JSON.stringify(plus.webview.currentWebview()))
      mui.back = function(){
        //首次按键，提示‘再按一次退出应用’
        if (!quitTime) {
          //记录第一次按下回退键的时间
          quitTime = new Date().getTime();
          //mui.toast('再按一次退出应用');
          history.go(-1);
          setTimeout(function() {
            //1s中后清除
            quitTime = null;
          }, 1000);
        }else{
          if((new Date().getTime() - quitTime) < 1000){
            quitTime = null;
            plus.runtime.quit();
          }
        }
      };
    })
  },
  methods: {
    tabUser(){
      mui.toast('正在切换')
      this.getData();
      this.curNum = 1;
    },
    reward(){
      let id = this.info.user_id;
      let self = this;
      let params = {
        to_user: this.info.user_id
        //,payment: 1
      };
      MH_API.clickReward(params).then(res => {
        if (res.status === 200) {
          mui.toast("打赏成功")
        }
        else if(res.status == 401){
          mui.toast(res.msg);
          setTimeout(function(){
            //跳转设置打赏金额页面
            self.$router.push({
              path: '/profile/rewardSetting'
            })
          }, 1000)
        }
        else{
          mui.toast(res.msg)
        }
      })
    },
    like(){
      let self = this;
      let params = {
        to_user: this.info.user_id
      };
      MH_API.clickLove(params).then(res => {
        if (res.status === 200) {
          mui.toast("已添加喜欢")
        }
        else{
          mui.toast(res.msg)
        }
      })
    },
    detail (id) {
      this.$router.push({
        path: '/meet/detail',
        query: {
          id: id
        }
      })
    },
    getData(){
      let self = this;
      let params = {};
      MH_API.getIndexData(params).then(res => {
        if (res.status === 200) {
          // if(!res.data.user_id){
          //   self.getData();
          //   return false
          // }
          self.info = res.data;
          if(res.data.images.length > 0){
            self.imgArr = res.data.images;
          }
          self.pageSize = res.data.images.length || 0;
          self.userid = res.data.user_id;
        }
      })
    }
  },
  components: {
    TabMenu
  },
  mounted:function(){

  },
  created(){
    this.getData();
    MH_API.getToken({

    }).then(res => {
      if (res.code === 200) {
        let rongyun = {
          token: res.token,
          id: res.userId
        }
        window.localStorage.setItem("rongyun", JSON.stringify(rongyun));
      }
    })
    this.city = window.localStorage.getItem("city")
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/css/mixin";
.mh-container {
  background-color: #f2f2f2;
  &.with-tab {
    padding-bottom: 5rem;
  }
}
.banner {
  position: relative;
  width: 100%;
  height: 6.5rem;
  background-color: #eee;
  overflow: hidden;
  img {width: 100%}
  .locate-city {
    @include ct;
    font-size: 1.5rem;
    padding-left: 2.5%; display:flex; height:2.1rem; align-items:center;
    img {
      width: 1.5rem;
      vertical-align: bottom;
    }
  }
}
.recomend-pic {
  position: relative;
  width: 95%;
  height: 75%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: .5rem;
  .reco-pic-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
  }
  img {
    width: 100%;
  }
  .reco-info {
    position: absolute;
    padding: 1.2rem;
    background: rgba(255, 255, 255, .6);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    .u-name {
      font-size: 1.5rem;
      color: #333;
    }
    .identify {
      margin: 0 .4rem;
      padding: 0 .2rem;
      background: #0ba8ef;
      color: #fff;
      font-size: 1rem;
    }
    .level {
      padding: 0 .2rem;
      background: #ff9620;
      color: #fff;
      font-size: 1rem;
    }
    .per-info {
      font-size: 1.2rem;
      color: #333;
    }
    .info-right {
      .matching {
        font-size: 1.8rem;
        color: #e685aa;
      }
      p {
        font-size: 1.2rem;
        color: #333;
      }
    }
  }
  .total-num {
    display: flex;
    justify-content: center;
    position: absolute;
    box-sizing: border-box;
    width: 4.4rem;
    padding: .2rem 0;
    top: 1rem;
    left: 1rem;
    background: #000;
    color: #fff;
    border-radius: 2rem;
    font-size: 1.2rem;
    text-align: center;
    z-index: 2;
    .cur-num {font-size: 1.5rem}
  }
  .like-num {
    position: absolute;
    top: 1rem;
    right: 0;
    text-align: right;
    z-index: 2;
    .like-num-inner {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: .4rem .7rem;
      background: #e685aa;
      font-size: 1.2rem;
      color: #fff;
      border-top-left-radius: 2rem;
      border-bottom-left-radius: 2rem;
      &>img {
        width: 1.4rem;
        height: 1.1rem;
        margin-right: .5rem;
      }
    }
  }
}
.operate-box {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  justify-content: space-around;
  div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 100%;
    box-shadow: 0 2px 4px rgba(126,142,177,0.12);
    &>img {
      width: 2rem;
    }
  }
  .btn-close {
    background-color: #a9a9a9;
  }
  .btn-reward {
    width: 6.5rem;
    height: 6.5rem;
    background-color: #f25243;
    &>img {
      width: 3.3rem;
    }
  }
  .btn-like {
    background: #e685aa;
    &>img {width: 2.7rem}
  }
}

</style>
